<template>
	<view>
		<navTab ref="navTab" :tabTitle="top_item" @changeTab='changeTab'></navTab>
		<swiper @change="swiperChange" :current="current" :style="{height:scrollHeight+'px'}" style="margin-top: 5upx;">
			<swiper-item v-for="(item,i) in top_item" :key="i">
				<scroll-view scroll-y :style="{height:scrollHeight+'px'}" @scrolltolower="load">
					<view v-for="(order,e) in orders[current].list" :key="e" style="padding: 0 20upx;margin-top: 15upx;background-color: white;">
						<view style="border-bottom: 1upx solid #EEEEEE;line-height: 2.5;font-size: 22upx;">
							<text>订单号：{{order.traceNo}}</text>
							<text style="float: right;">已取消</text>
						</view>
						<view v-for="(cart,k) in order.carts" :key="k" style="padding: 20upx 0;display: flex;flex-direction: row;border-bottom: 1upx solid #EEEEEE;">
							<image style="flex: 2;width: 300upx;height: 200upx;" :src="cart.goods.picUrl"></image>
							<view style="flex: 3;display: flex;justify-content: space-between;flex-direction: column;padding-left: 20upx;">
								<view style="font-weight: bold;">{{order.takeAddress}}</view>
								<view><text style="padding: 5upx 20upx;background-color: #FFE3CB;color: #FF8925;border-radius: 20upx;font-size: 22upx;">超时未支付</text></view>
								<view>
									<text>共{{cart.count}}件商品</text>
									<text>金额：￥{{cart.goods.price * cart.count}}</text>
								</view>
							</view>
						</view>
						<view style="display: flex;flex-direction: row;justify-content: space-between;padding-top: 20upx;">
							<text>合计{{getGoodsCount(order.carts)}}件商品</text>
							<text>需付款：￥{{order.amount}}</text>
							<text>已优惠金额：￥0.00</text>
						</view>
						<view style="padding: 20upx 0;">下单时间：{{order.createTime}}</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import navTab from "@/components/navTab.vue"
	// import mNoHint from '@/components/maozai-topTab/noHint.vue'
	export default {
		components: {
			navTab
		},
		data() {
			return {
				top_item: ['全部', '待付款', '待发货', '待收货', '已收货'],
				current: 0,
				scrollHeight: 400,
				type: 1,
				loading: false,
				orders:[
					{},{},{},{},{}
				],
				user: {},
				//'业务状态(1：待支付、2：待发货、3：待收货、4：已收货、5：已完成、6：已取消、7：申请退款、8：退款中、9：退款成功、10：退款失败、11：未支付自动取消，不在客户端显示)，初始1',
				// currentStatus:{
				// 	0:null,
				// 	1:1,
				// 	2:2,
				// 	3:3,
				// 	4:4
				// }
			}
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollHeight = res.windowHeight - 50;
					console.log(this.scrollHeight)
				}
			});
		},
		onLoad(e) {
			var user = uni.getStorageSync('user')
			if (user) {
				this.user = JSON.parse(user)
			}
			this.type = e.type
			this.current = e.status
			this.load()
		},
		computed: {
			getGoodsCount() {
				return function(carts) {
					var count = 0;
					carts.forEach((cart, k) => {
						count += cart.count
					})
					return count;
				}
			},
		},
		methods: {
			load() {
				if (!this.loading) { // 防止重复加载
					this.loading = true
					var currentList = this.orders[this.current]
					uni.request({
						url: this.apiUrl + "/client/order/list",
						method: "POST",
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data:{
							token: this.user.token,
							businessStatus:this.current == 0? '':this.current,//current与订单状态基本一致
							pageNum:currentList.hasOwnProperty('pageNum') ? currentList.pageNum+1 : 1,
							pageSize: 10
						},
						success: (res) => {
							this.loading = false
							const result = res.data;
							// console.log(result)
							if (result.code === 200) {
								const data = result.data.list;
								if(data.length > 0){
									if(currentList.hasOwnProperty('list')){
										for (var i = 0; i < data.length; i++) {
											currentList.list.push(data[i])
										}
									}else{
										currentList.list = data
									}
									currentList.pageNum = result.data.pageNum
								}
								console.log(this.orders[this.current].list);
							} else {
								uni.showToast({
									title: result.msg,
									icon: "none"
								});
							}
						},
						fail: (res) => {
							this.loading = false
							uni.showToast({
								title: res.errMsg,
								icon: "none"
							});
						}
					})
				}
			},
			changeTab(e) {
				console.log(e)
				this.current = e
			},
			swiperChange(e) {
				console.log(e)
				this.current = e.detail.current
				this.$refs.navTab.longClick(e.detail.current)
			}
		}
	}
</script>

<style>

</style>
